<html>
	<head>
		<meta name="layout" content="peachBlank"/>
		<title><g:message code="springSecurity.login.title"/></title>
		<g:if test='${flash.message}'>
			<script>
			$(window).load(function() {
				$.fallr({
					content : " ${flash.message} "
				});
			});	 
			</script>
		</g:if>
		
	</head>
	<body class="special_page">
		<div class="top">
			<div class="gradient"></div>
			<div class="white"></div>
			<div class="shadow"></div>
		</div>
		<div class="content">
			<h1><g:meta name="app.name"/>-<g:meta name="app.version"/> | <g:message code="springSecurity.login.title"/></h1>
			<div class="background"></div>
			<div class="wrapper">
				<div class="box">
					<div class="header grey">
						<img src="img/icons/packs/fugue/16x16/lock.png" width="16" height="16">
						<h3><g:message code="springSecurity.login.header"/></h3>
					</div>
					<form action='${postUrl}' method='POST'>
						<div class="content no-padding">
							<div class="section _100">
								<label>
									<g:message code="springSecurity.login.username.label"/>
								</label>
								<div>
									<input name="j_username" class="required">
								</div>
							</div>
							<div class="section _100">
								<label>
									<g:message code="springSecurity.login.password.label"/>
								</label>
								<div>
									<input name="j_password" type="password" class="required">
								</div>
							</div>
						</div>
						<div class="actions">
							<div class="actions-left" style="margin-top: 8px;">
								<label for="remember_me">
									<input type='checkbox' class='chk' name='${rememberMeParameter}' id='remember_me' <g:if test='${hasCookie}'>checked='checked'</g:if>/>
									<g:message code="springSecurity.login.remember.me.label"/>
								</label>
							</div>
							<div class="actions-right">
								<input type="submit" value="${message(code: "springSecurity.login.button")}"/>
							</div>
						</div>
					</form>
				</div>
				<div class="shadow"></div>
			</div>
		</div>
		
	 
	 
		<script>
		$(window).load(function(){
			/*
			 * Validate the form when it is submitted
			 */
			var validatelogin = $("form").validate({
				invalidHandler: function(form, validator) {
					var errors = validator.numberOfInvalids();
					if (errors) {
						var message = errors == 1
						  ? 'You missed 1 field. It has been highlighted.'
						  : 'You missed ' + errors + ' fields. They have been highlighted.';
						$('.box .content').removeAlertBoxes();
						$('.box .content').alertBox(message, {type: 'warning', icon: true, noMargin: false});
						$('.box .content .alert').css({
							width: '',
							margin: '0',
							borderLeft: 'none',
							borderRight: 'none',
							borderRadius: 0
						});
					} else {
						$('.box .content').removeAlertBoxes();
					}
				},
				showErrors : function(errorMap, errorList) {
						this.defaultShowErrors();
						var self = this;
						$.each(errorList, function() {
							var $input = $(this.element);
							var $label = $input.parent().find('label.error').hide();
							$label.addClass('red');
							$label.css('width', '');
							$input.trigger('labeled');
							$label.fadeIn();
						});
				},
				submitHandler: function(form) {
					window.location.replace('dashboard.html');
				}
			});
		});
		</script>		
	 
	</body>
</html>
